<template>
  <div>
    <van-nav-bar
      title="地图"
      left-text="返回"
      left-arrow
      @click-left="clickLeft"
    />
    <div class="amap-page-container">
      <el-amap class="amap-box" :vid="'amap-vue'" :plugin="plugin"></el-amap>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      const self = this;
      return {
        plugin: [{
            pName: 'ToolBar',
            events: {
              init(instance) {
                // console.log(instance);
              }
            }
          }, {
            pName: 'MapType',
            defaultType: 0,
            events: {
              init(instance) {
                // console.log(instance);
              }
            }
          }, {
            pName: 'Scale',
            events: {
              init(instance) {
                // console.log(instance);
              }
            }
          }]
      };
    },
    methods: {
      clickLeft() {
        this.$router.go(-1);
      },
    },
    mounted() {
      const clientHeight = document.documentElement.clientHeight;
      const amapContainer = document.getElementsByClassName('amap-page-container')[0];
      amapContainer.style.height = clientHeight - 46 + 'px';
    }
  }
</script>

<style scoped>
</style>